<!--
 * @Description: 
 * @Author: 赵华宇
 * @Date: 2024-11-05 15:19:53
 * @LastEditors: 赵华宇
 * @LastEditTime: 2024-11-09 17:50:18
-->
<!--
 * @Description: 
 * @Author: 赵华宇
 * @Date: 2024-11-05 15:19:53
 * @LastEditors: 赵华宇
 * @LastEditTime: 2024-11-05 15:20:04
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网上书城</title>
    <style>
    a{
            text-decoration: none;
    }
    #app{
        width:100vw;
        height:100vh;
        border:1px solid #000000;
    }
    #column{
        width:100vw;
        height:10px;
        border:1px solid green;
        background-color: green;
    }
    #colum1{
        width:100vw;
        height:40px;
        border:1px solid rgb(10, 69, 10);
        background-color: rgb(10, 69, 10);
    }
    #column3{
        width:100vw;
        height:30px;
        border:1px solid rgb(136, 163, 143);
        background-color: rgb(136, 163, 143);
        display:flex;
        justify-content:right;
        align-items:center;
    }
    #colum4{
        box-sizing:border-box;
        width:50vw;
        height:70vh;
        margin:20px 100px 25vw 25vw;
        border:1px solid rgb(20, 53, 4);
        background-color:rgb(247, 247, 240);
        position:absolute;
    }   
    #column5{
        width:calc(50vw - 20px);
        line-height: 40px;
        height:5vh;
        border:1px solid rgb(115, 115, 82);
        background-color:rgb(115, 115, 82);
        border-radius: 10px;
        margin-left:10px;
    }
    #cart{
        position:relative;
        top:20px;
        float:right;
    }
    #div1{
        position:relative;
        top:20px;
        float:right;
    }
    .center-txt{
        text-align:center;
        font-size:14px;
    }
    #index0{
        position:relative;
    }
    #index1{
        position:absolute;
        left:65vw;
        top:0
    }
    #index2{
        text-align:center;
    }
    .gallery {
    margin:5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.book-item {
    width: 23%;
    margin-bottom: 20px;
    text-align: center;
}

.book-item img {
    width: 80%;
    height: 75%;
}

.book-info {
    margin-top: 10px;
}
.apage{
    padding:2px 6px;
    border:1px solid #9aafe5;
    text-decoration: none;
    color:#9aafe5;
}
.checked{
    background-color:#3c00fb;
    border-color:#3c00fb;
}
.divFooter{
    margin-top: 44vw;
    width:100vw;
    height:55px;
    border:1px solid rgb(231, 237, 235);
    background-color:rgb(231, 237, 235);
}
.footerLeft{
    padding-top:10px;
    margin-left:10vw;
    float:left;
}
    </style>
</head>
<body>
    <div id="app">
        <img src="./img/logo.png" alt="图片未加载出来">
        <div id="div1"><a href="https://www.taobao.com/?bc_fl_src=tbsite_VXHOUdsQ" style="color:blue">购物车</a>|<a href="https://www.taobao.com/?bc_fl_src=tbsite_VXHOUdsQ" style="color:blue">帮助中心</a>|<a href="https://cn.bing.com/search?q=%E6%94%AF%E4%BB%98%E5%AE%9D" style="color:blue">我的账户</a>|<a href="http://127.0.0.1:5500/day48/%E6%B3%A8%E5%86%8C.html" style="color:blue">新用户注册</a></div>
        <img id="cart" src="./img/cart.gif" alt="图片未加载出来">
        <div id="column"></div>
        <div id="colum1">
            <!-- <table align="center"></table> -->
            <p class="center-txt"><a href="" style="color:white">文学 &nbsp</a> <a href="" style="color:white">计算机 &nbsp </a> <a href="" style="color:white">外语 &nbsp </a> <a href="" style="color:white">经营 &nbsp</a> <a href="" style="color:white">励志&nbsp </a> <a href="" style="color:white">社科 &nbsp</a> <a href="" style="color:white">学术&nbsp </a> <a href="" style="color:white">少儿 &nbsp</a> <a href="" style="color:white"> 艺术&nbsp </a> <a href="" style="color:white"> 原版&nbsp </a> <a href="" style="color:white"> 科技 &nbsp</a> <a href="" style="color:white"> 考试&nbsp </a> <a href="" style="color:white"> 生活百科&nbsp </a> <a href="" style="color:yellow">全部目录商品</a></p>
        </div>
        <div id="column3">
            Serach <input type="text"><button style="background-color:green;color:white">搜索</button>
        </div>
        <div id="index0">
        <sp id="index1"><a href="" style="color:#000000">首页</a>><a href="" style="color:#000000">旅游</a>><a href="" style="color:#000000">图书列表</a></sp>
        <div id="colum4">
            <sp  style="font-weight:bold;padding-left:5px;">商品目录</sp>
            <hr style="color:#000000; height: 2px;background-color: #000000;">
            <div style="font-weight:bold;padding-left:5px;">计算机类 <sp style="font-weight:lighter">共100种商品</sp></div>
            <hr style="color:#000000; height: 2px;background-color: #000000;">
            <div id="column5">
                <sp style="color:white;padding-left:10px;">PROFUCT LIST</sp>
            </div>
            <div margin-left=10px>
                <div>
                    <div class="gallery">
                        <div class="book-item">
                            <img src=".\img\101.jpg" alt="tupian" style="width:70px;height:100px">
                            <div class="book-info">
                                <p>书名: xxx</p>
                                <p>作者: xxx</p>
                            </div>
                        </div>
                        <div class="book-item">
                            <img src=".\img\102.jpg" alt="tupian" style="width:70px;height:100px">
                            <div class="book-info">
                                <p>书名: xxx</p>
                                <p>作者: xxx</p>
                            </div>
                        </div>
                        <div class="book-item">
                            <img src=".\img\103.jpg" alt="tupian"style="width:70px;height:100px">
                            <div class="book-info">
                                <p>书名: xxx</p>
                                <p>作者: xxx</p>
                            </div>
                        </div>
                        <div class="book-item">
                            <img src=".\img\104.jpg" alt="tupian"style="width:70px;height:100px">
                            <div class="book-info">
                                <p>书名: xxx</p>
                                <p>作者: xxx</p>
                            </div>
                        </div>
                        <div class="book-item">
                            <img src=".\img\105.jpg" alt="tupian"style="width:70px;height:100px">
                            <div class="book-info">
                                <p>书名: xxx</p>
                                <p>作者: xxx</p>
                            </div>
                        </div>
                        <div class="book-item">
                            <img src=".\img\106.jpg" alt="tupian"style="width:70px;height:100px">
                            <div class="book-info">
                                <p>书名: xxx</p>
                                <p>作者: xxx</p>
                            </div>
                        </div>
                        <div class="book-item">
                            <img src=".\img\107.jpg" alt="tupian"style="width:70px;height:100px">
                            <div class="book-info">
                                <p>书名: xxx</p>
                                <p>作者: xxx</p>
                            </div>
                        </div>
                        <div class="book-item">
                            <img src=".\img\108.jpg" alt="tupian"style="width:70px;height:100px">
                            <div class="book-info">
                                <p>书名: xxx</p>
                                <p>作者: xxx</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="index2"><a href="" class="apage">上一页</a><a href="" class="apage checked">1</a><a href="" class="apage">2</a><a href="" class="apage">3</a><a href="" class="apage">4</a><a href="" class="apage">5</a><a href="" class="apage">6</a><a href="" class="apage">7</a><a href="" class="apage">下一页</a></div>
            </div>
        </div>
    </div>
    <div class="divFooter">
        <!-- 加背景色 -->
        <!-- 左右布局 -->
        <div class="footerLeft">
            <img style="height:40px;"src="./img/logo.png" alt="图片未加载出来">
        </div>
        <p style="margin-left:25vw;margin-bottom:10px;">CONTACT US<br>copyright 2008 © BookStore All Rights RESERVED</p>
    </div>
</div>
</body>
</html>